﻿

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>介绍 - vue.js</title>
		
		<script src="../vue-2.6.11/dist/vue.js">
<script type="text/javascript">
<!--
	
//-->
</script>		

    </head>
    <body class="docs"> 

<div id="app">
  <p>{{ message }}</p>
  <p>{{ b }}</p>
  <p v-once>{{ c }}</p>
  <div v-html="rawHtml"></div>
  <div v-bind:id="dynamicId"></div>
  <p>{{ ok ? 'YES' : 'NO' }}</p>
  <button v-bind:disabled="isButtonDisabled">Button</button>
  <p v-if="seen">现在你看到我了</p>

	<template v-if="ok">
	  <h1>Title</h1>
	  <p>Paragraph 1</p>
	  <p>Paragraph 2</p>
	</template>
	<h1 v-else>No</h1>
	
<div v-if="Math.random() > 0.5">
  Now you see me
</div>
<div v-else>
  Now you don't
</div>	
	
<h1 v-show="ok">v-show</h1>


	
</div>
	
    </body>
	
<script type="text/javascript">
<!--
	
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
	b : '',
	c : '不会变',
	rawHtml : '<b>rawHtml</b>',
	dynamicId:'aa',
	ok : false,
	isButtonDisabled:0,
	seen:false
  }
})

app.$watch('b', function (newValue, oldValue) {
  // 这个回调将在 `app.b` 改变后调用
  console.log('原来的值' + oldValue);
  console.log('新的值' + newValue);
})

console.log(app);
console.log(app.message);
console.log(app.b);

//Vue.set(app.data, 'b', '2');
app.b = '后面加的';
app.c = '肆';
app.dynamicId = 'dynamicId';

console.log(app.message);
console.log(app.b);
console.log(app.c);

console.log(app.dynamicId);
</script>
	
</html>
